<!--
 * @Description:设备录入
-->
<template>
  <BaseMainSlot>
    <template v-slot:zhactbar>
      <ActionBar
        :cancel-active="cancelActive"
        :save-active="saveActive"
        :edit-active="editActive"
        :add-active="addActive"
        :del-active="delActive"
        @cancel="cancel"
        @edit="edit"
        @save="save"
        @add="add"
        @del="del"
      />
    </template>
    <enery @topitemtype="topitemtype" />
    <template v-slot:tablebox>
      <div class="tablebox">
        <div class="table-box-right">
          <el-table
            ref="tableData"
            highlight-current-row
            :data="tableData"
            border
            height="83%"
            class="tableData"
            @row-click="handleEdit"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="name" label="设备名称" />
          </el-table>
          <Pagination
            :page-size="pageSize"
            :current-page="currentPage"
            :total-size="totalSize"
            @changePageSize="changePageSize"
            @changeCurrentPage="changeCurrentPage"
          />
        </div>
      </div>
    </template>
    <template v-slot:form>
      <el-form
        ref="formData"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="设备选择:" prop="departmentName" class="w100p">
          <el-select
            v-model="formData.equipment"
            placeholder="请选择"
            :disabled="!canInput"
            filterable
            clearable
          >
            <el-option
              v-for="(item, index) in equipmentList"
              :key="index + 'equipment'"
              :label="item.employeeName"
              :value="item.employeeName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="展现设备名称:" prop="contact" class="w100p">
          <!-- <el-input v-model="formData.contact" placeholder="请输入负责人" :disabled="!canInput" clearable /> -->
          <el-input
            v-model="formData.energyEquipmentName"
            placeholder="请输入"
            :disabled="!canInput"
            clearable
          />
        </el-form-item>
      </el-form>
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import enery from "./components/index";
import req from "@/api/basic-info-manage/device-type";
import BaseMainSlot from "@/components/BaseMainSlot/basezuoyou.vue";
import { mymixin } from "@/utils/mixin";
export default {
  name: "DeviceType",
  components: { ActionBar, BaseMainSlot, Pagination, enery },
  /* Pagination, */
  mixins: [mymixin],
  data() {
    return {
      rules: {

      },
      conditionList: {
        entity: {
          energyTypeId: 0
        },
        order: "",
        page: 1,
        size: 10,
        sort: ""
      },
      tableData: [
        { name: "xingmig1", id: 1 },
        { name: "xingmig1", id: 1 },
        { name: "xingmig2", id: 2 },
        { name: "xingmig3", id: 3 },
        { name: "xingmig4", id: 4 },
        { name: "xingmig5", id: 5 }
      ],
      equipmentList: [],
      delList: [],
      equipmentType: 0
    };
  },
  watch: {
    nowChanceStau(newval) {
    },
    conditionList: {
      handler(newval) {
        this.getData();
      },
      deep: true
    }
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    // 分页数据
    getData() {
      // console.log("req", req.energyQueryPageList());
      req.energyQueryPageList(this.conditionList).then((res) => {
        // console.log(this.conditionList)
        // console.log(res);
      });
    },
    getEquipmentList() {

    },
    // 设备能源类型
    topitemtype(val) {
      this.equipmentType = val;
      this.conditionList.entity.energyTypeId = val;
      // console.log(this.conditionList)
    },
    // 添加设备
    /* add() {
      alert("添加！！！");
    }, */
    // 修改
    save() {
      // alert(this.nowChanceStau);
      if (this.nowChanceStau === "add") {
        // alert("add");
        this.nowChanceStau = "";
        this.addActive = true;
        this.saveActive = false;
        this.cancelActive = false;
      } else if (this.nowChanceStau === "edit") {
        this.nowChanceStau = "";
        this.addActive = true;
        this.saveActive = false;
        this.cancelActive = false;
      }
    },
    // 修改的数据
    handleEdit(val) {
      // console.log(val);
      this.formData = JSON.parse(JSON.stringify(val));
      // this.addActive = true;
      // this.addActive = false;
      this.editActive = true;
      this.saveActive = false;
      this.cancelActive = true;
      this.canInput = false;
    },

    // 选择要删除的设备
    handleSelectionChange(list) {
      let result = [];
      result = list.map((item) => item);
      // console.log(result);
      if (result.length > 0) this.delActive = true;
      else this.delActive = false;
      this.delList = result;
      // console.log("this.delList", this.delList);
    },
    delmessage(formData) {
      alert("删除");
      // console.log("formData", formData);
      // console.log(this.delList);
    },
    // 分页
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.conditionList.size = pageSize;
      // console.log(this.conditionList);
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.conditionList.page = currentPage;
      // console.log(this.conditionList);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
</style>

